Fork me on GitHub

React Native之GitHub Popular App项目总结

发表于 | 分类于

React Native现在所谓如火如荼，所以作者也不例外，赶紧来凑凑热闹。写这篇文章正式12月份了，也算是实现今年的目标，熟练使用React Native。到现在一共写了2个项目了，已经能够熟练写RN项目，现在也算是实现了这个小目标。

之前写过一篇文章也是一个项目总结React Native项目实践总结。不过这个项目比较小，最多能够让你入门吧，所以就想找个大的项目练练手。有幸发现了一个GitHub Popular这个APP，所以也就根据视频动手实现一下。

效果

gif有点大，想看效果的可以点击下边链接

效果图

差异

  1. 首先原来的GitHub Popular这个APP有些技术比较老了，比如Listview已经被废弃。作者采用了FlatList这个官方推荐的控件，相比Listview，FlatList性能比较高，具体想了解的可以去官网查看

  2. 在趋势模块导航中下拉框效果原作者使用了’Popover’这个第三方控件，但是由于react-native-navigation，必须要把视图加到window下，才能在导航栏上边显示，所以作者通过js与原生的交互封装了一个原生控件来实现该效果。

    BE52EE5B-9F2E-4167-B299-A7D853A5DED2.png

  3. APP的整体框架作者也没采用原来的，虽然原来的灵活性各方面也比较好吧。这里使用了一个官方推荐的react-native-navigation作为APP的整体框架，不过这里在切换主题的时候有一个坑（下边将详细介绍一下），如果不改原来代码是实现不了的，其他用起来还是比较顺手。

项目介绍

环境

开发语言

  • ES6
  • React Native 0.50.4

用到的第三方

  • react-native-check-box

  • react-native-htmlview

  • react-native-navigation

  • react-native-parallax-scroll-view

  • react-native-scrollable-tab-view

  • react-native-sortable-listview

App 结构

如果看作者源码的话可能会一头雾水，所以作者画了两个思维导图，能够让大家最快的了解这个项目

项目结构图

项目结构图.jpg

数据流向图

数据流向图.jpeg

遇到的坑

虽然是按照视频来写，但是由于项目的结构等一些差别还会导致一些坑

  • 数据改变后通知刷新视图，视图未刷新

在收藏子模块中，如果取消收藏了。我们则要在相应的最热、趋势模块也做相应的视图刷新，经过调试之后发现不会刷新，经过不断调试发现是由于异步调用造成的，采用延迟通知即可

1
2
3
4
this.timer = setTimeout(()=>{
  //一定要适当的延迟一下，因为AsyncStorage可能还没完全移除掉相应的key。
  DeviceEventEmitter.emit('ACTION_HOME',ACTION_HOME.A_UPDATE_FAVORITE);
},500)

这里的timer一定要在componentWillUnmount()方法进行释放

1
2
3
componentWillUnmount(){
  this.timer&&clearTimeout(this.timer);
}

  • 切换主题底部tabbar字体和图片的颜色不能改变

由于作者使用react-native-navigation这个第三方控件。其实本质就是封装了原生控件，当APP初始化之后，字体的颜色是该表不了了，不过图片能够改变。作者看了一下它的源码，其实实现也不难，只要改一下原生封装的代码，对外提供一个方法就好。

  • 自定义视图的时候刷新要在主线程

在实现趋势的下拉框过程中，点击回调显示下拉框的时候，要在主线程调用。

1
2
3
4
5
dispatch_async(dispatch_get_main_queue(), ^{
  [KxMenu showMenuInView:[UIApplication sharedApplication].keyWindow
                fromRect:CGRectMake([dic[@"ox"] floatValue], [dic[@"oy"] floatValue]+20, [dic[@"width"] floatValue], [dic[@"height"] floatValue])
               menuItems:arrays];
});
  • Can only update a mounted or mounting component…

    Warning:
    setState(…): Can only update a mounted or mounting component.
    This usually means you called setState() on an unmounted component.
    This is a no-op.
    Please check the code for the xxx component.

这个问题也是在趋势模块导航栏自定义标题视图中遇到的一个警告。场景就是导航栏标题视图点击选择[今天,本周,本月],选完之后要更新导航栏显示的文字为用户所选的。这里作者自定义了一个CustomTopBar.js，然后注册了一个通知来监听更新state来刷新顶部文字的显示

1
2
3
4
5
6
7
componentDidMount(){
  this.listner = DeviceEventEmitter.addListener(ACTION_CUSTOMTOPBAR.CHANGE_TITLE,(title)=>{
    this.setState({
      title:title
    })
  })
}

查来查去作者想这个component应该没有被unmount，要不怎么会显示出来呢，而且标题也会正常更新，这里只是一个警告。作者就反复看代码，发现了一个问题就是作者的listner没有被释放，所以就加入了释放代码,居然神奇般的警告就消失了

1
2
3
4
5
componentWillUnmount(){
  if (this.listner) {
    this.listner.remove();
  }
}

感悟

第一个项目写的时候比较生疏，写第二个的时候就有点孰能生巧的感觉，所以写的会比较快。看视频的时候最好别按部就班的去写，最好一边看然后暂停一下，自己去实现一下或者尝试不同的实现方式去写。有时候看视频其实也会忽略一些细节，导致项目报错，这时候不要慌，我们要充分利用debug模式配合Chrome来断点远程调试，一点一点的运行最终肯定会找到问题所在。

此项目源码传送门

0%